<template>
  <div>
    <div class="top">
      <div v-for="(item,index) in topList" :key="index">
        <span>{{item.label}}</span>
        <input type="text" v-model="form[item.key]" />
      </div>
    </div>
    <div class="bottom">
      <p class="hint">配置权限</p>
      <div class="checkbox">
        <i-checkbox-group @change="handleFruitChange">
          <i-checkbox
            v-for="(item,index) in checkboxList"
            :key="index"
            :value="item.moduleName"
            :checked="item.isBool"
            position="left"
            color="#5b94f6"
          ></i-checkbox>
        </i-checkbox-group>
      </div>
    </div>
    <button class="btn" @click="voerClick">完成</button>
  </div>
</template>

<script>
import { SHOP_ROLE_ADD, SHOP_ROLE_UPDATE } from '@/api'

export default {
  components: {},
  props: {},
  data () {
    return {
      form: {},
      wxKdbRole: require('./menu.json'),
      topList: [
        {
          label: '岗位名称：',
          key: 'roleName'
        },
        {
          label: '岗位描述：',
          key: 'roleContent'
        }
      ],
      checkboxList: []
    }
  },
  computed: {
    account () {
      return this.$store.state.account
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this.judgeMenuId()
  },
  onUnload () {
    this.$cookie.remove('wxKdbRoleList')
    this.form = {}
  },
  methods: {
    unique (arr) {
      return Array.from(new Set(arr))
    },
    voerClick () {
      const vm = this

      let list = []
      vm.checkboxList.forEach(_ => {
        if (_.isBool) {
          _.list.forEach(e => {
            list.push(e.menuId)
          })
        }
      })
      let params = {
        roleContent: vm.form.roleContent,
        shopId: vm.account.shopId,
        roleName: vm.form.roleName,
        menuIds: list
      }
      if (vm.$root.$mp.query.item) {
        params.roleId = vm.form.roleId
        vm.updateData(params)
      } else {
        vm.addData(params)
      }
    },
    handleFruitChange (e) {
      const vm = this
      for (let i = 0; i < vm.checkboxList.length; i++) {
        if (e.mp.detail.value === vm.checkboxList[i].moduleName) {
          vm.checkboxList[i].isBool = !vm.checkboxList[i].isBool
          break
        }
      }
    },
    judgeMenuId () {
      const vm = this
      let wxKdbRoleList = vm.wxKdbRole
      if (vm.$root.$mp.query.item) {
        let shopMenusList = JSON.parse(vm.$root.$mp.query.item).shopMenus
        vm.form = JSON.parse(vm.$root.$mp.query.item)
        let list = []
        shopMenusList.forEach(_ => {
          for (let i = 0; i < wxKdbRoleList.length; i++) {
            for (let j = 0; j < wxKdbRoleList[i].list.length; j++) {
              if (_.menuId === wxKdbRoleList[i].list[j].menuId) {
                list.push(wxKdbRoleList[i])
                break
              }
            }
          }
        })
        wxKdbRoleList.forEach(_ => {
          _.isBool = false
          vm.unique(list).forEach(e => {
            if (_.id === e.id) {
              _.isBool = true
            }
          })
        })
      } else {
        wxKdbRoleList.forEach(_ => {
          _.isBool = false
        })
      }
      vm.$cookie.set('wxKdbRoleList', wxKdbRoleList)
      vm.checkboxList = vm.$cookie.get('wxKdbRoleList')
    },
    updateData (params) {
      const vm = this
      SHOP_ROLE_UPDATE(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.$alert('保存成功', '').then(() => {
              vm.$router.go(-1)
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    addData (params) {
      const vm = this
      SHOP_ROLE_ADD(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.$alert('保存成功', '').then(() => {
              vm.$router.go(-1)
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';
.top {
  div {
    width: 90%;
    height: 60px;
    margin: auto;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    input {
      color: #666;
      width: 60%;
    }
  }
}
.bottom {
  .hint {
    font-size: 14px;
    border-left: 4px solid #626efd;
    padding-left: 8px;
  }
}
.btn {
  width: 95%;
  height: 45px;
  line-height: 45px;
  color: #ffffff;
  font-size: 14px;
  border-radius: 25px;
  background: #626efd;
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translate(-50%, 0);
}
</style>
